// 打印
const Printer = {
  printerOperationTicket: function (renderFun) {
    return `<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  <html dir="ltr" lang="zh">
  <head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <style>
      *{
        margin: 0;
        padding: 0;
        font-size: 16px;
      }
      body{
        width:100%;
        height: 100%;
        /* background: yellow; */
        margin: auto;
    }
    .box_title{
        height: 14%;
        // background: red;
        font-size: 18px;
        font-weight: bold;
        color: #000;
        text-align: center;
        /* margin: 10px 0; */
        /* padding: 10px 0; */
        margin: auto;
    }
    .box_content{
        padding: 0 30px;
        margin: auto;
        margin-top: 20px;
        position: relative;
        .seal {
          position: absolute;
          top: 0;
          left: 200px;
          width: 150px;
          height: 150px;
        }
    }
    .content{
            display: flex;
            justify-content: space-between;
            font-size: 16px;
            color: #333;
            margin: 20px 0;
           
        }
        #table{
    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
            width: 150%;
  }
  th{
    border: 1px solid #cad9ea;
    width: 300px;
    height: 40px;
    /* background: #FFD700; */
  }
  td{
    border: 1px solid #cad9ea;
    width: 300px;
    height: 80px;
  }
        .yaoqiu{
            display: flex;
        }
    </style>
    <script type="text/javascript">
      function printClick() {
        document.getElementById("printButton").setAttribute('style', 'display: none')
        window.print()
      }
      // https://www.coder.work/article/219299
      window.onbeforeunload = function (e) {
        e = e || window.event
        // 兼容IE8和Firefox 4之前的版本
        if (e) {
          e.returnValue = '关闭提示'
        }
        // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
        return '关闭提示'
      }
      
    </script>
  </head>
  <body>
    <div style="position: absolute;right: 10px; padding: 10px 20px">
      <button id="printButton" onClick='printClick()'>打印</button>
    </div>
    ${renderFun()}
  </body>
</html>`;
  },
  assembleDomHtml: (form, index, data) => {
    const imgUrl = require("../assets/img/seal.png");
    form.imgUr = imgUrl;
    // = form.warningNoticeName.substr(-3, 2);
    const textNum = form.warningNoticeName.split("第");
    const num = textNum[1].split("号")[0];
    const rangeDetailVos = form.rangeDetailVos.map(item => {
      return item.effectRange;
    });
    const effectRange = rangeDetailVos.join("、");
    // var tbody = document.getElementById("tbody");
    var str = "";
    // 测试数据
    var list = form.warningMeasureDetailVos;
    for (var i = 0; i < list.length; i++) {
      str += "<tr>" +
        '<td width="50px">' + (Number(i) + 1) + "</td>" +
        "<td>" + list[i].measureRequire + "</td>" +
        "<td>" + list[i].unitDeptId + "</td>" +

        "</tr>";
    }
    // debugger;
    // tbody.innerHTML = str;
    return ` <div>
    <!-- 头部 -->
    <div class="box_title">
        <div>${form.notName}</div>
        <div>${effectRange}(${form.dangerName})${form.warningLvName}预警通知</div>
        <div>〔${new Date().getFullYear()}〕第 ${num}号</div>
    </div>
    <div class="box_content">
    <img src="${form.imgUr}" alt="" srcset="" class="seal">
        <div class="content">
            <div>签发人：${form.approvalUser}</div>
            <div>时间：${form.approvalTime}</div>
        </div>
        <div class="content">
            <div>主送单位/部门：${form.unitName},公司本部：${form.deptName}</div>
        </div>
        <div class="content">
            <div>险情类别：${form.dangerName}</div>
            <div>预警级别：${form.warningLvName}</div>
        </div>
        <div class="content">
            <div>影响范围：${effectRange}</div>
            <div>影响时间：${form.effectStartTime}至${form.effectEndTime}</div>
        </div>
        <div class="content">
            <div>预警来源：${form.infoSourceName}</div>
        </div>
        <div class="content">
            <div>事件概要：${data.incidentOutline}</div>
        </div>
        <div class="content">
            <div class="yaoqiu"><div style="width: 200px;">有关措施要求：</div> 
            <table id="table"border="1px" cellpadding="1px" cellspacing="1px">
                <thead>
                <tr>
                  <th>序号</th>
                  <th>有关措施要求</th>
                  <th>部门/单位</th>
                </tr>
                </thead>
                <tbody id="tbody">${str}</tbody>
              </table>
        </div>
        
    </div>
    <div class="content">
        <div>联系人：${form.contact}</div>
    </div>
    <div class="content">
        <div>抄报：${form.outTheNewspaper}999</div>
        <div>抄送：${form.sendDuplicate}9999</div>
    </div>
</div>
    `;
  },
  xymldPrinter: (form) => {
    const imgUrl = require("../assets/img/seal.png");
    form.imgUr = imgUrl;
    const textNum = form.responseName.split("第");
    const num = textNum[1].split("号")[0];
    // const rangeDetailVos = form.rangeDetailVos.map(item => {
    //   return item.effectRange;
    // });
    // const effectRange = rangeDetailVos.join("、");
    // var tbody = document.getElementById("tbody");
    var str = "";
    // 测试数据
    var list = form.emergencyMeasureListVos;
    for (var i = 0; i < list.length; i++) {
      str += "<tr>" +
        '<td width="50px">' + (Number(i) + 1) + "</td>" +
        "<td>" + list[i].measureRequire + "</td>" +
        "<td>" + list[i].unitDeptName + "</td>" +

        "</tr>";
    }
    // debugger;
    // tbody.innerHTML = str;
    return ` <div>
    <!-- 头部 -->
    <div class="box_title">
        <div>${form.notName}</div>
        <div>关于${form.effectRange}(${form.eventName})${form.responseLvName}应急响应命令</div>
        <div>〔${new Date().getFullYear()}〕第 ${num}号</div>
    </div>
    <div class="box_content">
    <img src="${form.imgUr}" alt="" srcset="" class="seal">
        <div class="content">
            <div>签发人：${form.approvalUser}</div>
            <div>时间：${form.createTime}</div>
        </div>
        <div class="content">
            <div>主送单位：${form.mainUnitName}</div>
        </div>
        <div class="content">
            <div>响应部门${form.responseDeptName}</div>
        </div>
        <div class="content">
            <div>事件类别：${form.eventName}</div>
            <div>响应级别：${form.responseLvName}</div>
        </div>
        <div class="content">
            <div>影响范围：${form.effectRange}</div>
            <div>影响时间：${form.effectTime}</div>
        </div>
        <div class="content">
            <div>信息来源：${form.infoSourceName}</div>
        </div>
        <div class="content">
            <div>事件概要：${form.incidentOutline}</div>
        </div>
        <div class="content">
            <div class="yaoqiu"><div style="width: 200px;">有关措施要求：</div> 
            <table id="table"border="1px" cellpadding="1px" cellspacing="1px">
                <thead>
                <tr>
                  <th>序号</th>
                  <th>有关措施要求</th>
                  <th>部门/单位</th>
                </tr>
                </thead>
                <tbody id="tbody">${str}</tbody>
              </table>
        </div>
        
    </div>
    <div class="content">
        <div>联系人：${form.linkman ? form.linkman.split(",") : ""}</div>
    </div>
    <div class="content">
        <div>抄报：${form.outTheNewspaper}999</div>
        <div>抄送：${form.sendDuplicate}9999</div>
    </div>
</div>
    `;


  }
};
export default Printer;
